import React, { Component } from 'react';
//在组件中一定要引入store，store是redux的核心，只有引入了，才能执行store，开启redux
import store from '../../redux/store';

export default class Count extends Component {
    state = {
        isHot: true,
    }
    render() {
        return (
            <div>
                <h1>今天天气{this.state.isHot ? '炎热' : '寒冷'}</h1>
                <h2>当前的值是{store.getState()}</h2>
                <div>
                    <select ref={el => this.selectEle = el}>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                    </select>
                    <button onClick={this.increment}>+</button>
                    <button onClick={this.decrement}>-</button>
                    <button onClick={this.incrementOdd}>如果奇数再加</button>
                    <button onClick={this.incrementWait}>延迟1s再加</button>
                </div>
            </div>
        )
    }

    increment = () => {
        const { value } = this.selectEle;
        //向store发送要做的事情和数据
        store.dispatch({ type: 'increment', data: +value });
    }

    decrement = () => {
        const { value } = this.selectEle;
        //向store发送要做的事情和数据
        store.dispatch({ type: 'decrement', data: +value });
    }

    incrementOdd = () => {
        const { value } = this.selectEle;
        if (store.getState() % 2 === 0) return alert('偶数不加');
        //向store发送要做的事情和数据
        store.dispatch({ type: 'increment', data: +value });
    }

    incrementWait = () => {
        const { value } = this.selectEle;
        setTimeout(() => {
            //向store发送要做的事情和数据
            store.dispatch({ type: 'increment', data: +value });
        }, 1000)

    }

}
